<script setup>
import { ArrowLeft } from "@element-plus/icons-vue";
import LeftMenu from "./createCommodity/LeftMenu.vue";
import { useRouter, useRoute } from "vue-router";
import CreateForm from "./createCommodity/CreateForm.vue";
import { getGoodsDetail } from "@/api/goods";
import { onMounted } from "vue";
import { useCreate } from "@/store/useCreate";
import { storeToRefs } from "pinia";
import { ref } from "vue";
const router = useRouter();
const route = useRoute();
const goodsId = route.query.goodsId;
const createStore = useCreate();
const { formData } = storeToRefs(createStore);
onMounted(() => {
  if (goodsId) {
    getGoodsInfo();
  } else {
    showForm.value = true;
  }
});

const showForm = ref(false);
const getGoodsInfo = async () => {
  const res = await getGoodsDetail({ id: goodsId });
  formData.value = res.data;
  showForm.value = true;
};
// 返回列表
const back = () => {
  router.back();
};
</script>

<template>
  <div class="back-home">
    <p @click="back">
      <el-icon><ArrowLeft /></el-icon> 回到首页
    </p>
  </div>
  <div class="box">
    <LeftMenu />
    <div style="flex: 1" v-loading="!showForm" element-loading-text="加载中...">
      <CreateForm v-if="showForm" />
    </div>
  </div>
</template>

<style scoped lang="scss">
.back-home {
  background: #ffffff;
  box-shadow: 0px 0px 16px 0px rgba(11, 13, 18, 0.06);
  border-radius: 16px 16px 16px 16px;
  border: 1px solid rgba(25, 30, 40, 0.08);
  padding: 20px;
  color: rgba(25, 30, 40, 0.48);
  margin-bottom: 16px;
  p {
    display: flex;
    align-items: center;
    cursor: pointer;
    &:hover {
      color: #333;
    }
  }
}
.box {
  flex: 1;
  display: flex;
}
</style>